<template>
	<view class="container">
		<!-- 顶部区域 -->
		<view class="header">
			<!-- 应用名称和控制栏 -->
			<view class="header-top">
				<view class="header-left">
					<text class="app-name">宠智灵</text>
					<view class="version-tag">
						<text>切换异宠版</text>
					</view>
				</view>
				<view class="header-right">
					<!-- 控制按钮组已移除 -->
				</view>
			</view>
			
			<!-- 副标题 -->
			<view class="app-subtitle">
				<text>爱宠健康管理小助手</text>
			</view>
			
			<!-- 宠物卡片区域 -->
			<view class="pet-card">
				<view class="pet-actions">
					<view class="my-pet-btn">
						<text>我的爱宠</text>
						<view class="arrow-btn">
							<text>&rarr;</text>
						</view>
					</view>
				</view>
				
				<!-- 宠物形象 -->
				<view class="pet-character">
					<view class="speech-bubble">
						<text>Hi!</text>
					</view>
					<image src="/static/icons/pet-white.png" class="pet-image"></image>
				</view>
				
				<!-- 宠物信息卡片 -->
				<view class="pet-info-box">
					<view class="pet-info-content">
						<view class="pet-avatar">
							<image src="/static/pets/dog-avatar.png" class="avatar-img"></image>
						</view>
						<view class="pet-details">
							<view class="pet-name">狗狗,博美犬</view>
							<view class="pet-meta">0个月 | 妹妹 | 博美犬 | 未绝育</view>
						</view>
						<view class="pet-arrow">
							<text class="pet-arrow-icon">></text>
						</view>
					</view>
				</view>
				
				<!-- 底部标签 -->
				<view class="feature-tags">
					<view class="feature-tag-item">
						<image src="/static/icons/shield.png" class="tag-icon"></image>
						<text>专业安全保障</text>
					</view>
					<view class="feature-tag-item">
						<image src="/static/icons/doctor.png" class="tag-icon"></image>
						<text>丰富医疗案例</text>
					</view>
					<view class="feature-tag-item">
						<image src="/static/icons/data.png" class="tag-icon"></image>
						<text>权威兽医数据</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 功能卡片区域 -->
		<view class="cards-section">
			<!-- 左侧猫狗问诊卡片 -->
			<view class="feature-grid">
				<view class="feature-card orange-card">
					<view class="corner-tag">极速诊断</view>
					<view class="feature-title">猫狗问诊</view>
					<view class="feature-desc-list">
						<text class="feature-desc-item">输入爱宠具体症状</text>
						<text class="feature-desc-item">精准识别分析</text>
						<text class="feature-desc-item">24小时在线</text>
					</view>
					<view class="arrow-icon">
						<text class="arrow">></text>
					</view>
					<image src="/static/image/doctor.png" mode="aspectFit" class="doctor-image"></image>
				</view>
				
				<!-- 右侧两个卡片 -->
				<view class="right-cards">
					<!-- 爱宠健康评测卡片 -->
					<view class="feature-card blue-card">
						<view class="feature-title">爱宠健康评测</view>
						<view class="feature-desc-list">
							<text class="feature-desc-item">精准评估宠物</text>
							<text class="feature-desc-item">健康及时预防</text>
						</view>
						<image src="/static/feature/health-icon.png" mode="aspectFit" class="small-feature-image"></image>
					</view>
					
					<!-- 养宠疑难问答卡片 -->
					<view class="feature-card purple-card">
						<view class="feature-title">养宠疑难问答</view>
						<view class="feature-desc-list">
							<text class="feature-desc-item">专业宠物知识</text>
							<text class="feature-desc-item">针对性解决难题</text>
						</view>
						<image src="/static/feature/qa-icon.png" mode="aspectFit" class="small-feature-image"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 广告banner -->
		<view class="banner-section">
			<view class="emoji-banner">
				<view class="emoji-content">
					<view class="emoji-title">
						<text class="emoji-title-text">爱宠表情包</text>
						<text class="emoji-free-text">免费体验</text>
					</view>
					<view class="emoji-desc">记录宠物每个可爱瞬间</view>
					<view class="emoji-btn">
						<text>立刻去 ></text>
					</view>
				</view>
				<view class="emoji-images">
					<image src="/static/banner/emoji-pack.png" mode="aspectFit" class="emoji-pack-img"></image>
				</view>
			</view>
		</view>
		
		<!-- AI模型数据来源 -->
	<!-- 	<view class="ai-model-info">
			<view class="dot-line left"></view>
			<text class="ai-model-text">宠智灵AI大模型数据来源</text>
			<view class="dot-line right"></view>
		</view> -->
		
		<!-- 底部导航栏 -->
		<view class="tab-bar">
			<view class="tab-item active">
				<image src="/static/icons/home-active.png" mode="aspectFit"></image>
				<text>首页</text>
			</view>
			<view class="tab-item">
				<image src="/static/icons/community.png" mode="aspectFit"></image>
				<text>识别</text>
			</view>
			<view class="tab-item">
				<image src="/static/icons/message.png" mode="aspectFit"></image>
				<text>养宠</text>
			</view>
			<view class="tab-item" @click="goToProfile">
				<image src="/static/icons/profile.png" mode="aspectFit"></image>
				<text>我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '宠智灵'
			}
		},
		onLoad() {
		},
		methods: {
			goToProfile() {
				uni.navigateTo({
					url: '/pages/profile/index'
				});
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-bottom: 100rpx;
	}
	
	/* 顶部区域样式 */
	.header {
		background-color: #FFDA3E;
		padding: 40rpx 30rpx;
		position: relative;
	}
	
	.header-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}
	
	.header-left {
		display: flex;
		align-items: center;
	}
	
	.app-name {
		color: #333;
		font-size: 40rpx;
		font-weight: bold;
		margin-right: 20rpx;
	}
	
	.version-tag {
		background-color: #333;
		color: #fff;
		font-size: 22rpx;
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
	}
	
	.header-right {
		/* 保留样式容器，但移除内容 */
	}
	
	.app-subtitle {
		color: #555;
		font-size: 26rpx;
		margin-bottom: 30rpx;
	}
	
	/* 宠物卡片样式 */
	.pet-card {
		background: linear-gradient(to bottom, #FF9B3F, #FFA950);
		border-radius: 20rpx;
		padding: 20rpx;
		position: relative;
		overflow: hidden;
	}
	
	.pet-actions {
		margin-bottom: 15rpx;
	}
	
	.my-pet-btn {
		display: inline-flex;
		align-items: center;
		background-color: #FF8C1A;
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
	}
	
	.arrow-btn {
		background-color: rgba(255, 255, 255, 0.3);
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 15rpx;
	}
	
	.pet-character {
		position: absolute;
		top: 20rpx;
		right: 30rpx;
		display: flex;
		align-items: flex-start;
	}
	
	.speech-bubble {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 8rpx 20rpx;
		margin-right: 10rpx;
		position: relative;
	}
	
	.speech-bubble:after {
		content: '';
		position: absolute;
		right: -10rpx;
		top: 50%;
		transform: translateY(-50%);
		border-left: 10rpx solid #fff;
		border-top: 10rpx solid transparent;
		border-bottom: 10rpx solid transparent;
	}
	
	.pet-image {
		width: 100rpx;
		height: 100rpx;
	}
	
	.pet-info-box {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 30rpx 0;
		padding: 20rpx;
	}
	
	.pet-info-content {
		display: flex;
		align-items: center;
	}
	
	.pet-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}
	
	.avatar-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.pet-details {
		flex: 1;
	}
	
	.pet-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}
	
	.pet-meta {
		font-size: 24rpx;
		color: #888;
	}
	
	.pet-arrow {
		padding: 0 10rpx;
	}
	
	.pet-arrow-icon {
		font-size: 32rpx;
		color: #999;
	}
	
	.feature-tags {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 0;
	}
	
	.feature-tag-item {
		display: flex;
		align-items: center;
		color: rgba(254, 207, 203, 0.9);
		font-size: 22rpx;
	}
	
	.tag-icon {
		width: 24rpx;
		height: 24rpx;
		margin-right: 8rpx;
	}
	
	/* 功能卡片区域样式 */
	.cards-section {
		padding: 20rpx 30rpx;
	}
	
	.feature-grid {
		display: flex;
		gap: 20rpx;
	}
	
	.feature-card {
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		padding: 30rpx;
		position: relative;
		overflow: hidden;
	}
	
	.orange-card {
		background-color: #FFA030;
		color: white;
		flex: 1;
		height: 520rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
	
	.corner-tag {
		position: absolute;
		top: 0;
		right: 0;
		background-color: #333;
		color: white;
		font-size: 22rpx;
		padding: 6rpx 20rpx;
		border-radius: 0 20rpx 0 20rpx;
	}
	
	.doctor-image {
		position: absolute;
		right: 0rpx;
		bottom: 20rpx;
		width: 270rpx;
		height: 400rpx;
	}
	
	.right-cards {
		display: flex;
		flex-direction: column;
		flex: 1;
		gap: 20rpx;
	}
	
	.blue-card {
		background-color: #4AA5FF;
		color: white;
		flex: 1;
		height: 250rpx;
	}
	
	.purple-card {
		background-color: #A995FF;
		color: white;
		flex: 1;
		height: 250rpx;
	}
	
	.feature-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.feature-desc-list {
		display: flex;
		flex-direction: column;
	}
	
	.feature-desc-item {
		font-size: 26rpx;
		line-height: 1.6;
		color: rgba(255, 255, 255, 0.9);
	}
	
	.arrow-icon {
		margin-top: 30rpx;
	}
	
	.arrow {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		font-size: 24rpx;
	}
	
	.small-feature-image {
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		width: 100rpx;
		height: 100rpx;
	}
	
	/* 广告banner样式 */
	.banner-section {
		padding: 10rpx 30rpx 30rpx;
	}
	
	.emoji-banner {
		background-color: #FFEFD7;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		overflow: hidden;
		position: relative;
	}
	
	.emoji-content {
		flex: 1;
		z-index: 2;
	}
	
	.emoji-title {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
	
	.emoji-title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.emoji-free-text {
		color: #FF6B00;
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 10rpx;
	}
	
	.emoji-desc {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 20rpx;
	}
	
	.emoji-btn {
		display: inline-block;
		background-color: #FF8C1A;
		color: white;
		font-size: 24rpx;
		padding: 8rpx 24rpx;
		border-radius: 20rpx;
	}
	
	.emoji-images {
		position: absolute;
		right: -20rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1;
	}
	
	.emoji-pack-img {
		width: 240rpx;
		height: 140rpx;
	}
	
	/* AI模型数据来源样式 */
	/* .ai-model-info {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 30rpx 40rpx;
	} */
	
	.dot-line {
		height: 2rpx;
		width: 100rpx;
		background: linear-gradient(to right, transparent 0%, transparent 50%, #F1B590 50%, #F1B590 100%);
		background-size: 8rpx 2rpx;
		background-repeat: repeat-x;
	}
	
	.dot-line.left {
		margin-right: 20rpx;
	}
	
	.dot-line.right {
		margin-left: 20rpx;
		transform: rotate(180deg);
	}
	
	.ai-model-text {
		font-size: 26rpx;
		color: #999;
	}
	
	/* 底部导航栏样式 */
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 90rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1rpx solid rgba(0,0,0,0.05);
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 6rpx;
	}
	
	.tab-item image {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 4rpx;
	}
	
	.tab-item text {
		font-size: 20rpx;
		color: #999;
	}
	
	.tab-item.active text {
		color: #FF9B3F;
	}
</style>
